<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品详情页</title>
	 <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />
</head>

<body>
	<script>
		/*生成sku表*/
	var skuList = [
		<#list itemList as item>
			{
				"id":${item.id?c},
				"title":"${item.title}",
				"sellPoint":"${item.sellPoint}",
				"price":${item.price?c},
				"spec":${item.spec}
			},
		</#list>
	]
	</script>


<#--将图片转成json对象-->
<#assign imageList=goodsDesc.itemImages?eval />

<#--将扩展属性转成json对象-->
<#assign customAttributeItemsList=goodsDesc.customAttributeItems?eval />

<#--将规格与规格选项转成json对象-->
<#assign specificationItemsList=goodsDesc.specificationItems?eval />



<!--页面顶部 开始-->
<#include "head.ftl">
<!--页面顶部 结束-->
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">${item1.name}</a>
					</li>
					<li>
						<a href="#">${item2.name}</a>
					</li>
					<li>
						<a href="#">${item3.name}</a>
					</li>
					<li class="active">${goods.goodsName}</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom"><img jqimg="${imageList[0].url}" src="${imageList[0].url}" width="412px" height="412px"/></span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<#list imageList as image>
										<li><img src="${image.url}" bimg="${image.url}" onmousemove="preview(this)" /></li>
									</#list>

								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<#---->
					<div class="sku-name">
						<h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
					</div>
					<div class="news"><span>${goods.caption}</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title">
								<i>价　　格</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<em id="priceId">2222</em>
								<span>降价通知</span>
							</div>
							<div class="fr remark">
								<i>累计评价</i><em>612188</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
							<div id="specification" class="summary-wrap clearfix">
                    		<#list specificationItemsList as spec>
                                    <dl>
                                        <dt>
                                            <div class="fl title">
                                                <i>${spec.attributeName}</i>
                                            </div>
                                        </dt>
                                        <#list spec.attributeValue as attr>
                                            <dd><a name="specOptions" href="javascript:selectSpec('${spec.attributeName}','${attr}');" >${attr}<span title="点击取消选择">&nbsp;</span></a></dd>
                                        </#list>
                                    </dl>
                                </#list>

                            </div>

                            <div class="summary-wrap">
                                <div class="fl title">
                                    <div class="control-group">
                                        <div class="controls">
                                            <input autocomplete="off" type="text" value="1" name="numInfo1" minnum="1" id="itxt" class="itxt" />
                                            <a href="javascript:void(0)" class="increment plus" onclick="increament(1)">+</a>
                                            <a href="javascript:void(0)" class="increment mins" onclick="increament(-1)">-</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="fl">
                                    <ul class="btn-choose unstyled">
                                        <li>
                                            <a href="javascript:getCartList()"  class="sui-btn  btn-danger addshopcar">加入购物车</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="">
											<img src="img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab" onclick="">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<#--扩展属性-->
								<ul class="goods-intro unstyled">
									<#list customAttributeItemsList as attritem>
										<li>${attritem.text}:${attritem.value}</li>
									</#list>

								</ul>
								<div class="intro-detail">
									<#--<img src="img/_/intro01.png" />
									<img src="img/_/intro02.png" />
									<img src="img/_/intro03.png" />-->
									${goodsDesc.introduction}
								</div>
							</div>
							<#--商品介绍-->
							<div id="two" class="tab-pane">
								<p>${goodsDesc.packageList}</p>
							</div>
							<div id="three" class="tab-pane">
								<p>${goodsDesc.saleService}</p>
							</div>
							<div id="four" class="tab-pane"  >
								好评度:<select id="commentlevel" name="commentlevel" onchange="getComment()">
									<option value="">请选择好评度</option>
									<option value="1">❤</option>
									<option value="2">❤❤</option>
									<option value="3">❤❤❤</option>
									<option value="4">❤❤❤❤</option>
									<option value="5">❤❤❤❤❤</option>
								</select>
								<p id="mycomment" ></p>
								<a href="javascript:toPage(1)">首页</a>
								<a href="javascript:toPage(2)">上一页</a>
								<a href="javascript:toPage(3)">下一页</a>
								<a href="javascript:toPage(4)">尾页</a>
								当前第<input type="text" name="pageNumber" id="pageNum" size="2">页
								每页<input type="text" name="pageSize" id="pageSize" size="2">条
								总<input type="text" name="totalPage" id="totalPage" size="2" readonly="readonly">页
								总<input type="text" name="totalCount" id="totalCount" size="2" readonly="readonly">条
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>

								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
								<input type="hidden" name="goodsIdCart1">
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部栏位 -->
<!--页面底部  开始 -->

<#include "foot.ftl">
<!--页面底部  结束 -->
</body>

</html>
<script type="text/javascript">
	/*加入购物车*/
	function getCartList(){
		// 获取sku主键 商品数量
		var itemId = $("[name=goodsIdCart1]").val();
		var num = $("[name=numInfo1]").val();
		alert(itemId)
		alert(num)
		location.href = "http://localhost:9030/cart/addCart?itemId=" + itemId + "&num=" + num;
	}
$(function () {
	getComment();
})
	var comlevel;
	var id = '${goods.id?c}';
	function getComment() {
		comlevel = $("#commentlevel").val();
		//alert(comlevel)
		//alert(id);
		$.ajax({
			url: "http://363i17i771.wicp.vip/comment/getComment",
			dataType: "json",
			type: "post",
			async: true,
			data:{
				goodsid:id,
				commentlevel:comlevel,
				pageNumber:$("[name=pageNumber]").val(),
				pageSize:$("[name=pageSize]").val()
			},
			success: function (result) {
				buildPage(result.data)
				//var result = result.data.result;
				var data = result.data.result;
				console.log(data);
				var content = '';
				for(var i =0; i < data.length; i++){
					content += '<div>\n' +
							'\t\t\t\t\t\t\t\t\t评论者:'+data[i].nickname+'<br>\n' +
							'\t\t\t\t\t\t\t\t\t<span style="color: red">';
					content += '';
					if(data[i].commentlevel == 1){
						content += "❤";
					}else if(data[i].commentlevel == 2){
						content += "❤❤";
					}else if(data[i].commentlevel == 3){
						content += "❤❤❤";
					}else if(data[i].commentlevel == 4){
						content += "❤❤❤❤";
					}else if(data[i].commentlevel == 5){
						content += "❤❤❤❤❤";
					}
					content +=	'</span><br>\t\t\t\t\t\t\t\t\t评论内容：'+data[i].content+'<br>\n' +
							'\t\t\t\t\t\t\t\t\t图片：<img src="'+data[i].images+'" style="height: 160px;width:160px"><br>\n' +
							'\t\t\t\t\t\t\t\t\t时间:'+data[i].createdatetime+'\n<br>';
					content += '<textarea id="'+data[i].id+'"></textarea><a href="javaScript:ReplyToComments('+data[i].id+')">回复</a>';
					content += '\t\t\t\t\t\t\t\t</div>';
				}
				console.log(content);
				$("#mycomment").html(content);
			},
			error: function (result) {
				alert("网络错误，请联系管理员");
			}
		});
	}
	// /*回复*/
	// function ReplyToComments(id){
	// 	var content = $("#" + id ).val()
	// 	alert(content);
	// 	$.ajax({
	// 		url: "http://363i17i771.wicp.vip/comment/ReplyToComments",
	// 		type: "post",
	// 		dataType: "json",
	// 		data: {selleName:selleName,content:content,parentId:id},
	// 		async: false,
	// 		success: function (result) {
	// 			alert("回复成功");
	// 		},
	// 		error: function (result) {
	// 			alert("网络错误，请联系管理员");
	// 		}
	// 	})
	// }

</script>
<script type="text/javascript">
	function buildPage(data){
		//获取页面文本框并赋值 (当前页数)
		$("#pageNum").val(data.pageNumber);
		$("#pageSize").val(data.pageSize);
		$("#totalPage").val(data.totalPage);
		$("#totalCount").val(data.totalCount);
	}
	function toPage(flag){
		var pageNum = parseInt($("#pageNum").val());//当前页数
		var totalPage = parseInt($("#totalPage").val());//总页数
		if(flag == 1){//首页
			if (pageNum <= 1){//当前页数<=1
				alert("已经是首页");
				return;
			}
			$("#pageNum").val(1);
		}else if (flag == 2){//上一页
			if (pageNum <= 1){
				alert("已经是第一页");
				return;
			}
			$("#pageNum").val(pageNum - 1);
		}else if (flag == 3){//下一页
			if (pageNum >= totalPage){//如果当前页数>=最后一页
				alert("已经是最后一页");
				return;
			}
			$("#pageNum").val(pageNum + 1);
		}else if (flag == 4){
			if (pageNum >= totalPage){
				alert("已经是尾页");
				return;
			}
			$("#pageNum").val(totalPage);
		}
		getComment();
	}
</script>
